<template>
    <div class="userinfo-block">
        <div>
            <Upload
                ref="upload"
                :show-upload-list="false"
                :headers="uploadHeader"
                :action="uploadUrl"
                :on-success="uploadSuccess"
                :on-error="uploadError">
                <img class="avator" :src="imageSrc">
            </Upload>
        </div>
        <ul>
            <li>用户名:{{ this.userInfo.user_name}}</li>
            <li>地区:{{ this.userInfo.province}} {{ this.userInfo.city }}</li>
            <li>学历:{{ this.userInfo.education }}</li>
            <li>职位:{{ this.userInfo.position || this.userInfo.education || ""}}</li>
            <li>工作单位:{{ this.userInfo.working_unit}}</li>
        </ul>
        <Button class="editinfo-block" @click="userinfoModal = true"><Icon type="ios-list-box-outline" />编辑信息</Button>
        <Modal
        v-model="userinfoModal"
        :mask-closable="false"
        width="480"
        title="编辑个人信息">
            <Form :label-width="90">
                <FormItem label="用户名">
                    <Input type="text" style="width:250px" v-model="editUserinfo.user_name"/> 
                </FormItem>
                <FormItem label="学历">
                    <Input type="text" style="width:250px" v-model="editUserinfo.education"/> 
                </FormItem>
                <FormItem label="职位">
                    <Input type="text" style="width:250px" v-model="editUserinfo.position"/> 
                </FormItem>
                <FormItem label="工作单位">
                    <Input type="text" style="width:250px" v-model="editUserinfo.working_unit"/> 
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="confirmUserinfo">提交</Button>
            </div> 
        </Modal>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import { domain } from '@/utils/host';
import { submitAvator } from '@/api/user'
import { mapActions } from 'vuex';
export default {
    inject:['reload'],
    computed:{
        uploadHeader(){
            return {
                'Authorization':getToken()
            }
        },
        uploadUrl(){
            return submitAvator()
        },
        imageSrc(){
            return `${domain}/fdl/preImages/${this.preImage}`
        }
    },
    data(){
        return{
            userInfo:{},
            userinfoModal:false,
            preImage:localStorage.getItem("header_path"),
            editUserinfo:{
                user_name:"",
                education:"",
                position:"",
                working_unit:"",
            }
        }
    },
    methods: {
        ...mapActions(['XgetUserInfo','XupdateUserInfo']),
        uploadSuccess(imageName){
            localStorage.setItem("header_path",imageName);
            this.$Message.success('上传成功');
            setTimeout(()=>{
                this.reload()
            },500)
        },
        uploadError(){
            this.$Message.error('上传失败');
        },
        confirmUserinfo(){
            // console.log(Object.assign(this.userInfo,this.editUserinfo))
            this.XupdateUserInfo(Object.assign(this.userInfo,this.editUserinfo)).then(res => {
                this.$Message.success("编辑成功")
            }).catch(err => {
                this.$Message.error(err.response.data.message)
            })
        }
    },
    mounted(){
        this.XgetUserInfo().then(res => {
            this.userInfo = res.data;
            this.editUserinfo.user_name = res.data.user_name;
            this.editUserinfo.position = res.data.position;
            this.editUserinfo.working_unit = res.data.working_unit;
            this.editUserinfo.education = res.data.education;
        })
    }
}
</script>

<style lang="scss" scoped>
    .userinfo-block{
        text-align: center;
        position: relative;
    }
    .avator{
        width:150px;
        height: 150px;
    }
    li{
        padding: 20px;
        list-style: none;
        font-size: 14px;
        color: #4d4d4d;
    }
    .editinfo-block{
        position: absolute;
        top:0;
        right: 0;
        width:96px;
        height:32px;
        background:#68AAFD;
        color:#fff;
        border-radius:6px;
    }
</style>